<!--  -->
<template>
  <div class="context_box_f">
    <div class="credit-card">
      <div class="credit_card_in" v-for="(item, i) in detailArr" :key="i">
        <div class="credit_card_in_t flex">
          <div class="credit_card_in_t_l img">
            <img :src="item.type==1?compareArr[1]:compareArr[0]" alt="" />
          </div>
          <div class="credit_card_in_t_r">
            {{item.creditWay || '未知操作'}}
          </div>
        </div>
        <div class="credit_card_in_b cenFlex">
          <div class="credit_card_in_t_l"></div>
          <div class="credit_card_in_t_r sbFlex">
            <div class="credit_card_in_t_r_l">{{item.createdAt}}</div>
            <div class="credit_card_in_t_r_r" :class="item.type==1?'':'niceRed'">{{item.type==1?'+':'-'}}{{item.score}}分</div>
          </div>
        </div>
      </div>
    </div>
    <div class="taskM_page" v-if="total>limit">
      <van-pagination
        v-model="currentPage"
        :items-per-page="limit"
        :total-items="total"
        :show-page-size="3"
        @change="getInit"
        force-ellipses
      />
    </div>
  </div>
</template>

<script>
import api from "@/api/user";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      compareArr: [
        require("@/assets/img/index_icon28.png"),
        require("@/assets/img/index_icon29.png"),
      ],
      currentPage: 1,
      detailArr:[],
      total:0,
      limit:10
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 初始获取页数
    getInit(currentPage) {
      let page = currentPage || this.currentPage;
      this.currentPage = page;
      let param = {
        limit: this.limit,
        page: page,
      };
      api.userScoreDetai(param).then((res) => {
        if(res.code==0){
          this.detailArr = res.data.list;
          this.total = res.data.totalCount;
        }
        
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getInit(1);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.context_box_f {
  padding: 15px 30px;
  ::v-deep {
    .van-pagination__item {
      color: $niceblue;
      &:active {
        background-color: $niceblue;
        color: #fff;
      }
    }
    .van-pagination__item--active {
      background-color: $niceblue;
      color: #fff;
    }
  }
  .flexEnd {
    display: flex;
    align-items: flex-end;
  }
  .niceRed{
    color: $nicered;
  }
  .niceOrange{
    color: $niceblue;
  }
  .credit-card {
    background: #ffffff;
    box-shadow: 0px 0px 36px 10px rgba(134, 134, 134, 0.1);
    border-radius: 10px;
    // height: 540px;
    .credit_card_in {
      padding: 20px;
      border-bottom: 1px #eee solid;
      &:nth-last-child(1){
        border-bottom: 0px #eee solid;
      }
      .credit_card_in_t_l {
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-right: 5px;
      }
      .credit_card_in_t_r {
        width: 100%;
      }
      .credit_card_in_t {
        margin-bottom: 10px;
        align-items: flex-start;
        line-height: 1.2;
      }
      .credit_card_in_b {
        .credit_card_in_t_r_l {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}
.taskM_page {
  margin-top: 10px;
}
</style>